<template>
<h1 style="font-weight: bold; text-align: center;margin-top: 50px;">缴费</h1>
 <el-table :data="paylist" border style="width: 100%;margin-top: 50px;" :cell-style="cellStyle" :header-cell-style="headerCellStyle">
    <el-table-column prop="id" label="id" width="200" />
    <el-table-column prop="roomCode" label="房间号" width="200" />
    <el-table-column prop="bedCode" label="床位号" width="200" />
    <el-table-column prop="name" label="病人" width="200" />
    <el-table-column prop="total" label="费用总计" width="200" />
    <el-table-column prop="isPay" label="缴费状态" width="200">
        <template v-slot="scoped">
          <span :class="{ 'paid-status': scoped.row.isPay==1 || scoped.row.isPay=='已交' }">
          {{scoped.row.isPay==0?"未交":"已交"}}
          </span>
        </template>
    </el-table-column>
    <el-table-column prop="" label="操作" width="320">
        <template v-slot="scoped">
             <el-button link type="primary" @click="paydetailed(scoped.row)">查看费用明细</el-button>
             <el-button link type="primary" @click="payeds(scoped.row)">立即缴费</el-button>
        </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import {ref,reactive, onMounted, onUnmounted} from 'vue'
import http from '@/api/http.js';
import {useRoute, useRouter} from 'vue-router'

const route=useRoute();
const code=route.params.patientCode||""
// console.log(1111,code)

const router=useRouter()
const paylist=ref([])
const getpaylist=()=>{
    http.get('/api/PayInfoController/GetPayList')
    .then(res=>{
        paylist.value=res
        console.log('获取缴费列表成功:', res)
    })
    .catch(err => {
        console.error('获取缴费列表失败:', err)
    })
}

//缴费明细
const paydetailed=(row:any)=>{
    router.push({
      path:"paydetail",
      query:{
         a:JSON.stringify(row)
     }
    })
}

//立即缴费
const payeds=(row:any)=>{
  router.push({
      path:"Payed",
      query:{
         a:JSON.stringify(row)
     }
    })
}

// 单元格内容居中样式
const cellStyle = {
  textAlign: 'center',
  verticalAlign: 'middle'
}

// 表头居中样式
const headerCellStyle = {
  textAlign: 'center',
  backgroundColor: '#F5F7FA',
  color: '#606266',
  fontWeight: 'bold',
  verticalAlign: 'middle'
}

// 监听支付成功消息
const setupPaymentListener = () => {
  window.addEventListener('message', (event) => {
    // 检查消息类型
    if (event.data && event.data.type === 'PAYMENT_SUCCESS') {
      console.log('收到支付成功消息，刷新列表')
      getpaylist() // 刷新列表
    }
  })
}

onMounted(() => {
  getpaylist()
  
  // 设置支付成功消息监听
  setupPaymentListener()
  
  // 检查是否需要刷新列表（支付成功后返回）
  const needRefresh = localStorage.getItem('refreshPaymentList')
  if (needRefresh === 'true') {
    // 清除标记
    localStorage.removeItem('refreshPaymentList')
    // 延迟一点再次刷新，确保API有时间更新数据
    setTimeout(() => {
      console.log('支付后刷新缴费列表')
      getpaylist()
    }, 1000) // 增加延迟时间
  }
  
  // 监听页面激活事件
  window.addEventListener('focus', handlePageActivated)
})

// 页面激活时也检查刷新
const handlePageActivated = () => {
    // 检查是否需要刷新列表
    const needRefresh = localStorage.getItem('refreshPaymentList')
    if (needRefresh === 'true') {
        // 清除标记
        localStorage.removeItem('refreshPaymentList')
        // 刷新列表
        console.log('页面激活时刷新缴费列表')
        getpaylist()
    }
}

onUnmounted(() => {
    window.removeEventListener('focus', handlePageActivated)
    // 移除支付消息监听器
    window.removeEventListener('message', setupPaymentListener)
})

</script>

<style scoped>
/* 确保按钮在单元格中居中 */
.el-button {
  display: inline-block;
  margin: 0 5px;
}

/* 支付状态样式 */
.paid-status {
  color: #F56C6C;
  font-weight: bold;
}

/* 增强表格样式 */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

:deep(.el-table th) {
  padding: 12px 0;
}

:deep(.el-table td) {
  padding: 10px 0;
}

:deep(.el-table--border) {
  border: 1px solid #EBEEF5;
}

:deep(.el-table__row:hover > td) {
  background-color: #F5F7FA !important;
}
</style>
